<template>
  <div class="culture">
    <!-- tit -->
    <div class="tit">
      <h2>企业文化</h2>
      <div class="empty-box"></div>
      <p>做国内最值得信赖的政企数字化应用专家，更高效的推动政企数字化建设，实现社会价值</p> 
    </div>
    <!-- con -->
    <div class="con">
      <div class="jzg">
        <p>核心价值观</p>
      </div>
      <div class="item-box">
        <!-- 每一项 -->
        <div
          class="item"
          v-for="item in message"
          :key="item.img"
        >
          <div class="item-con">
            <img :src="item.img" alt="">
            <p>{{ item.text }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Culture",
    data() {
      return {
        message: [
          {
            img: require("../../../assets/img/profile/yhdy.png"),
            text: "用户第一"
          },
          {
            img: require("../../../assets/img/profile/zzcx.png"),
            text: "正直诚信"
          },
          {
            img: require("../../../assets/img/profile/xxcx.png"),
            text: "学习创新"
          },
          {
            img: require("../../../assets/img/profile/gsgy.png"),
            text: "共生共赢"
          }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>
  // 导入公共头部
  @import "assets/scss/public";

  .culture {
    width: 62.5%;
    margin: 40px auto;
    .tit {
      .empty-box {
        background: linear-gradient(90deg, #2f6bee, #009fff);
      };
    };
    .con {
      display: flex;
      padding: 40px;
      box-shadow: 0 0 10px #f5f5f5;
      .jzg {
        width: 208px;
        height: 400px;
        background-color: #1890ff;
        p {
          font-size: 32px;
          font-weight: 1000;
          color: #fff;
          text-align: center;
          line-height: 400px;
        };
      };
      .item-box {
        display: flex;
        .item {
          width: 208px;
          height: 400px;
          border: 4px solid #1890ff;
          position: relative;
          margin-left: 20px;
          .item-con {
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            p {
              font-size: 20px;
              color: #333;
              margin-top: 16px;
            };
          };
        };
      };
    };
    .con:hover {
      transition-duration: 0.3s;
      transform: translateY(-5px);
    }
  };
</style>